<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
    <script src="../js库/mock.js"></script>
    <script src="../js库/vue.js"></script>
  
</head>
<body>
    <div id="root">

        <!-- 表格属性 一般都是通过css设置  写在table标签内
            align对齐 left center right
            border边框 
            cellpadding文字和单元格边框的距离
            cellspacing单元格和单元格之间的距离 默认为2 为0时就是一条线
            width宽度
         -->
        <h1>表格</h1>
        <!-- <table align="center"  border="1" cellpadding="0" cellspacing="0" width="500"> -->
            <!-- <tr>    行 -->
                <!-- <th>id</th> 加粗居中显示 -->
                <!-- <th>姓名</th> 
                <th>年龄</th>
                 <th>工资</th>
            </tr>
            <tr>
                <td>10086</td>
                <td>{{cname}}</td>
                <td>13</td>
                <td>5000</td>
            </tr>
        </table> -->
        <!-- <table align="center" cellpadding="2" border="1" cellspacing="0">
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
            <tr><td>{{d1.id}}</td>
                <td>{{d1.title}}</td>
                <td>{{d1.qu}}</td>
                <td>{{d1.search}}</td>
                <td>{{d1.last}}</td>
                <td>
                    <a :href="`https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&dyTabStr=MCwzLDEsNiw0LDUsNyw4LDIsOQ%3D%3D&kw=`+d1.title"><u>贴吧</u></a>
                    <a :href="`https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&dyTabStr=MCwzLDEsNiw0LDUsNyw4LDIsOQ%3D%3D&word=`+d1.title"><u>图片</u></a>
                    <a :href="`https://baike.baidu.com/item/`+d1.title"><u>百科</u></a>
                </td></tr>
          
           
           
        </table> -->
        <!-- 表格结构标签  thead tbody -->
        <!-- <table align="center" cellpadding="2" border="1" cellspacing="0">
            <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>{{d1.id}}</td>
                <td>{{d1.title}}</td>
                <td>{{d1.qu}}</td>
                <td>{{d1.search}}</td>
                <td>{{d1.last}}</td>
                <td>
                    <a :href="`https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&dyTabStr=MCwzLDEsNiw0LDUsNyw4LDIsOQ%3D%3D&kw=`+d1.title"><u>贴吧</u></a>
                    <a :href="`https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&dyTabStr=MCwzLDEsNiw0LDUsNyw4LDIsOQ%3D%3D&word=`+d1.title"><u>图片</u></a>
                    <a :href="`https://baike.baidu.com/item/`+d1.title"><u>百科</u></a>
                </td></tr>
                <tr><td>{{d1.id}}</td>
                    <td>{{d1.title}}</td>
                    <td>{{d1.qu}}</td>
                    <td>{{d1.search}}</td>
                    <td>{{d1.last}}</td>
                    <td>
                        <a :href="`https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&dyTabStr=MCwzLDEsNiw0LDUsNyw4LDIsOQ%3D%3D&kw=`+d1.title"><u>贴吧</u></a>
                        <a :href="`https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&dyTabStr=MCwzLDEsNiw0LDUsNyw4LDIsOQ%3D%3D&word=`+d1.title"><u>图片</u></a>
                        <a :href="`https://baike.baidu.com/item/`+d1.title"><u>百科</u></a>
                    </td></tr>
            </tbody>
           
        </table>  -->
        <!-- 合并单元格
            rowspan 跨行
            colspan 跨列
        -->
        <table border="1" align="center" cellspacing="0" cellpadding="10">
            <tr>
                <td  rowspan="2">1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="2">2</td>
                <!-- <td>3</td> -->
                <td>4</td>
            </tr>
        </table>

    </div>
</body>
<script type="text/javascript">
    // alert(Mock.mock('@word(10)'));
    new Vue({
        el:"#root",
        data: { 
            d1:{
            id:Mock.mock({'num|1-10':1}).num,      
            title:Mock.mock('@cname'),
            qu:Mock.mock({'bool|1-2':true}).bool,
            search:Mock.mock({'search|100-200':101}).search,
            last:Mock.mock({'la|200-300':201}).la,
            }
                }
    })
</script>
</html>